<template>
  <div  class="bady-sty">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content ep-bg-purple" >
          <div style="background-color: #fff;padding:10px;height: 700px;">
            <div style="text-align: center;font-size: 16px;font-weight: 600;padding-bottom: 15px;padding-top: 10px;">个人SOP配置步骤</div>
            <div v-for="item in stepdata" :class="stepid == item.id ? 'label-list label-list-bgc':'label-list'">
              <div  :class="stepid == item.id ? 'index-cla index-cla-bgc':'index-cla'" v-if="stepid <= item.id">{{item.id}}</div><el-icon style="color: #2F9BFF;margin-left: 20px;" v-else><CircleCheck /></el-icon><div class="label-cla">{{item.name}}</div>
            </div>
          </div>
        </div>
      </el-col>
    <el-col :span="20">
      <div v-if="isRefresh" class="grid-content ep-bg-purple" >
        <div style="background-color: #fff;padding:10px;height: 700px;" v-if="stepid == 1">
          <div class="top-rigthtitle">
            基本信息
          </div>
          <div style="margin-top: 15px;">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              :size="formSize"
              status-icon
            >
            <el-form-item label="使用场景" prop="name">
               <el-radio-group style="margin-top:-5px" v-model="ruleForm.scene_type" class="ml-4">
            <el-radio :label="1" size="large">激活新客户</el-radio>
             <el-radio :label="2" size="large">客户关怀</el-radio>
              <el-radio :label="3" size="large">节日营销</el-radio>
</el-radio-group>
              </el-form-item>
              <el-form-item label="SOP规则名称" prop="name">
                <el-input v-model="ruleForm.name" style="width: 200px;" />
              </el-form-item>
              <div class="top-rigthtitle">
                SOP触发范围
              </div>
              <div style="background-color: #FCFDFF;padding: 20px 15px;margin-top: 15px;border: 1px solid #EDF6FF;border-radius: 7px;" v-if="ruleForm.scene_type == 1">
                <div style="margin-top: 10px;">
                  <div class="activation-title">激活新客户</div>
                  <div class="activation-bor">新客户运营</div>
                </div>
                <div style="color:#969698;font-size: 14px;">
                  所有新添加企业员工的客户，会触发SOP规则，也可设置指定添加某些员工的客户会触发规则
                </div>

              </div>
              <div style="background-color: #FCFDFF;padding: 20px 15px;margin-top: 15px;border: 1px solid #EDF6FF;border-radius: 7px;" v-if="ruleForm.scene_type == 2">
                <div style="margin-top: 10px;">
                  <div class="activation-title">客户关怀</div>
                  <div class="activation-bor">客户生日关怀</div>
                </div>
                <div style="color:#969698;font-size: 14px;">
                  临近客户的生日时，触发SOP内容，提升客户的关怀体验
                </div>

              </div>
              <div style="background-color: #FCFDFF;padding: 20px 15px;margin-top: 15px;border: 1px solid #EDF6FF;border-radius: 7px;" v-if="ruleForm.scene_type == 3">
                <div style="margin-top: 10px;">
                  <div class="activation-title">节日营销</div>
                  <div class="activation-bor">节假日营销</div>
                </div>
                <div style="color:#969698;font-size: 14px;">
                  临近节假日时，指定用户触发SOP，分发节日相关的SOP内容
                </div>

              </div>
              <el-form-item label="触发成员" prop="name" style="margin-top: 10px;">
                <div>
                <div>
                <el-button @click="chooseStaff"><el-icon style="margin-right: 7px;"><Plus /></el-icon>添加成员</el-button>
              </div>
                <div>

                <div class="" v-if="isRefresh">
									<span class="app-tag app-gap-tr" v-for="(select, index) in staffData" :key="index">
										<span class="app-flex-left">
											<el-avatar class="cho-margin" shape="square" :size="30" :src="select.avatar" />
											<span class="app-gap-words-left">{{ select.name }}</span>
										</span>
										<el-icon
											@click="handleDele(index)"
											class="app-tag-close"
											:size="16"
											color="#999"
										>
											<CircleClose />
										</el-icon>
									</span>
								</div>
              </div>
              </div>
                <ChooseDialogue :dialogVisible="dialogVisible" @getChooseData="getChooseData($event, val)" ref="chooseDialogue" />
              </el-form-item>
              <el-form-item label="选择节日" style="margin-top: 10px;" v-if="ruleForm.scene_type == 3">
                <el-select v-model="ruleForm.festival" class="m-2" >
                  <el-option
                    v-for="item in jieri"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="过滤条件" style="margin-top: 10px;">
                <div v-if="isRefresh">
                  <el-switch @change="handleRefresh" v-model="ruleForm.filter_status" :active-value="1"
      :inactive-value="0" /><span style="margin-left: 7px;">{{ruleForm.filter_status==1 ? '已开启':'已关闭'}}</span>
                </div>
                
                
              </el-form-item>
              <div style="display: flex;justify-content: flex-start;align-items: center;
              margin-left: 120px;" v-if="value1">
                  当处于
                  <span style="margin:0 8px;" v-if="isRefresh">
                  <span @click="showLabels" class="app-flex-2 app-choose-staff" v-if="tagData.length>1">
                    <span class="app-flex-left">
        
        <span>{{ tagData[0].tag_name }}等{{tagData.length}}个标签</span>
      </span>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
    <span @click="showLabels" class="app-flex-2 app-choose-staff" v-else>
      <span class="app-flex-left" v-for="(item,index) in tagData" :key="index">
        <span>{{ item.tag_name }}</span>
      </span>
      <span v-if="tagData.length==0">请选择标签</span>
      <el-icon>
        <ArrowDown />
      </el-icon>
    </span>
  </span>
                  <!-- <span><el-select v-model="value" class="m-2" placeholder="Select">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></span> -->
                  <span>的客户，不会触发SOP</span>
                </div>
                <labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
              <div style="margin-top: 20px;">
                <!-- <el-button @click="stepid = 1">上一步</el-button> -->
                <el-button @click="changeTab(2)" type="primary" style="margin-left: 15px;">下一步</el-button>
              </div>
                
              
            </el-form>
          </div>
        </div>
        <div style="background-color: #fff;padding:10px;" v-if="stepid == 2">
          <div class="top-rigthtitle">
            运营内容及推送规则
          </div>
          <div style="display: none;">
            <el-empty description="您还未添加任何SOP规则" >
              <div style="color:#909399;font-size: 14px;margin-bottom: 15px;">
                点击下发增加规则按钮，添加吧
              </div>
              <div>
                <el-button type="primary" @click="addrule"><el-icon style="margin-right: 5px;"><Plus /></el-icon>增加规则</el-button>
              </div>
            </el-empty>
          </div>
          <div>
            <div>
              <div style="margin-top: 20px;float: left;">
                  <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in rule_data"
      size="large"
      placement="top"
      :key="index"
      :icon="Clock"
      :timestamp="activity.timestamp"
    >

    <el-button v-if="activity.isAdd" @click="addrule"  type="primary" style="margin-top: -4px;"><el-icon><Plus /></el-icon>增加规则</el-button>
    
     <el-card v-else style="padding:0px">

        <div style="float: left;margin-top: 0px;">
                <div style="background-color: #FCFDFF;padding: 15px;">
                  <div style="color:#9B9996">共{{activity.send_content.content.length + 1}}条内容：</div>
                  <div style="margin-top: 15px;" >
                    <span style="font-weight: 600;">内容1：</span>
                    <span>{{activity.send_content.text}}</span>
                  </div>
                  <div style="margin-top: 15px;" v-for="(act,idx) in activity.send_content.content" :key="idx">
                    <span style="font-weight: 600;">内容{{idx+2}}：</span>
                    <span>{{act.title}}</span>
                  </div>
                  <div style="margin-top: 20px;">
                    <!-- <div class="stage">修改旅程阶段</div> -->
                    <div style="display: inline-block;color: #7F8081;float: right;margin-top: 10px;">
                      <el-icon style="margin-right: 7px;" @click="dele(index,activity.id)"><Delete /></el-icon>
                      <el-icon style="margin-right: 7px;"  @click="copy(index)"><DocumentCopy /></el-icon>
                      <el-icon style="margin-right: 7px;" @click="edit(index)" v-if="!activity.id"><EditPen /></el-icon>
                    </div>
                  </div>
                </div>
                
            </div>
      </el-card>

    </el-timeline-item>
  </el-timeline>
                
              </div>
              
             
       
            </div>
          </div>
          <div style="clear: both"></div>
          <div style="margin-top: 30px;">
            <el-button @click="changeTab(1)">上一步</el-button>
            <el-button @click="changeTab(3)" type="primary">下一步</el-button>
          </div>
        </div>
        <div style="background-color: #fff;padding:10px;height: 700px;" v-if="stepid == 3">
          <div class="top-rigthtitle">
            时间设置
          </div>
          <div>
            <span>开始时间设置：</span>
            <span>
              <el-radio-group v-model="ruleForm.start_type" class="ml-4">
                <el-radio :label="1" size="large">立即开始</el-radio>
                <el-radio :label="2" size="large">定时开始</el-radio>
              </el-radio-group>
            </span>
          </div>
          <div v-if="ruleForm.start_type==1" style="margin-left: 100px;color:#595959;font-size: 14px;">可以根据想要的SOP开始的时间进行设置，例如元旦节1月1日，那么可以设置SOP从1月1日开始生效</div>
          <div v-else style="margin-left: 100px;color:#595959;font-size: 14px;">
          <el-date-picker
          style="margin-top:6px"
        v-model="selfTime2"
        value-format="YYYY-MM-DD hh:mm:ss"
        type="datetime"
        placeholder="请选择"
      />
          <div style="margin-top:6px">
SOP任务创建完成后将从指定时间开始生效，指定时间之后符合条件的客户触发SOP规则
          </div>
          
          </div>


          <div style="margin-top: 30px;">
            <el-button @click="changeTab(2)">上一步</el-button>
            <el-button type="primary" @click="save">创建</el-button>
          </div>
        </div>
      </div>
    </el-col>
    
  </el-row>
  </div>
  <el-drawer
  size="50%"
    v-if="isRefresh"
    v-model="addruleshow"
    title="添加规则"
    :direction="direction"
    :before-close="handleClose"
  >
    <div>
      <el-form
        ref="ruleFormRef"
        :model="ruleFormTemp"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
      <div class="app-flex-left" style="font-weight:600;margin-bottom:10px">
      <div
            style="
              width: 4px;
              height: 15px;
              background-color: #1890ff;
              margin-right: 3px;
              margin-top: 4px;
            "
          ></div>
          运营策略：
</div>
        <el-form-item label="请选择触达形式" prop="name" class="lableser">
          <el-radio-group v-model="ruleFormTemp.trigger_form" class="ml-4">
        <div>
            <el-radio label="1" size="large">
              <div>一键群发</div>
              <div style="word-wrap: break-word;">
                员工可在企业微信通知内一键发送给所有<br/>客户，客户每天仅接收一条。(该方式会占用一次企业群发。)
              </div>
            </el-radio>
            </div>
            <div>
            <el-radio label="2" size="large">
              <div>任务下发</div>
              <div>
                由管理员发送给员工，员工再单独发送给<br/>客户，每个客户可以接收信息不受限制
              </div>
            </el-radio>
            </div>
            <div>
            <el-radio label="3" size="large">
              <div>纯提醒</div>
              <div>
                管理员给员工发送通知，员工完成通知内<br/>任务
              </div>
            </el-radio>
             </div>
            <!-- <el-radio label="4" size="large">
              <div>企微朋友圈群发</div>
              <div>
                每月每位客户可收到4次，成员收到提醒<br/>后，在客户朋友圈中，点击发表
              </div>
            </el-radio>
            <el-radio label="3" size="large">
              <div>修改旅程阶段</div>
              <div>
                当客户触发SOP后，客户会被移到待定旅<br/>程
              </div>
            </el-radio> -->
          </el-radio-group>
        </el-form-item>

              <div class="app-flex-left" style="font-weight:600;margin-bottom:10px">
      <div
            style="
              width: 4px;
              height: 15px;
              background-color: #1890ff;
              margin-right: 3px;
              margin-top: 4px;
            "
          ></div>
          时间规则：
</div>


<div>
  <div>
               <el-radio-group v-model="ruleFormTemp.send_type" class="ml-4">
            <el-radio :label="1" size="large">定时推送</el-radio>
             <el-radio v-if="ruleForm.scene_type == 1" :label="2" size="large">周期推送</el-radio>
             
</el-radio-group>
</div>
<div v-if="ruleFormTemp.send_type==2">
   <el-tag
        style=""
        class="app-el-tag-common app-margin-bottom"
        type="primary"
      >
        <MyIcon class="app-icon app-primary-font" name="Bell" />
        设置推送周期及文案(设置规则后将会通过「提醒」提醒员工发送推送内容)
      </el-tag>
      <div style="background:#fbfbfb;padding:18px;color:#999">
      <el-form-item label="开始时间：">
        <el-radio-group style="margin-top:-5px;width:200px" v-model="ruleFormTemp.send_starttime_type" class="ml-4">
            <el-radio label="1" size="large">立即开始</el-radio>
              <el-radio label="2" size="large">定时开始<el-date-picker
    class="app-date-picker"
    style="margin-left:10px"
    size="large"
    value-format="YYYY-MM-DD"
		format="YYYY-MM-DD"
    v-model="selfTime"
    type="date"
    
  /></el-radio> 
</el-radio-group>
        </el-form-item>
              <el-form-item label="结束时间：">
        <el-radio-group style="margin-top:-5px;width:200px" v-model="ruleFormTemp.send_endtime_type" class="ml-4">
            <el-radio label="1" size="large">永久有效</el-radio>
              <el-radio label="2" size="large">定时结束<el-date-picker
    class="app-date-picker"
    style="margin-left:10px"
    size="large"
    value-format="YYYY-MM-DD"
		format="YYYY-MM-DD"
    v-model="selfTime1"
    type="date"
    
  /></el-radio> 
</el-radio-group>
        </el-form-item>
<el-form-item label="推送频率：">
<div class="app-flex-left" style="color:#999"><el-input-number
								v-model="ruleFormTemp.send_frequency"
								:min="1"
								style="width: 160px;margin-left:8px"
								controls-position="right"
								size="large"
								:controls="true"
							/>

<el-popover 

											popper-style="padding: 0px;min-width:0px"
											placement="right"
											:width="100"
											trigger="click"
										>
											<div style="padding:10px" :style="{background:hoverIndex==1?'#9DD0FF':''}" @mouseover="hoverIndex=1" @click="ruleFormTempsend_timing_data.type='minute'">
                      分钟
                      </div>
                      <div class="active-item-a" style="padding:10px" :style="{background:hoverIndex==2?'#9DD0FF':''}"  @mouseover="hoverIndex=2" @click="ruleFormTempsend_timing_data.type='hour'">
                      小时
                      </div>
                       <div class="active-item-a" style="padding:10px" :style="{background:hoverIndex==3?'#9DD0FF':''}"    @mouseover="hoverIndex=3" @click="ruleFormTempsend_timing_data.type='day'">
                      天
                      </div>
											<template #reference>
											<div class="app-flex-left" style="height:40px;padding:0 16px;border:1px solid #dcdfe6;color:#333;border-left:none">
{{ruleFormTempsend_timing_data.type=='day'?'天':ruleFormTempsend_timing_data.type=='minute'?'分钟':'小时'}}
<el-icon style="margin-left:6px">
        <ArrowDown />
      </el-icon>
</div>
											</template>
										</el-popover>



        <span style="margin-left:8px">
        推送一次     
        </span>

</div>

</el-form-item>
</div>

      
</div>
<div v-if="ruleFormTemp.send_type==1" class="app-flex-left" style="background:#fbfbfb;padding:18px;color:#999">
  <span v-if="ruleForm.scene_type == 1">添加好友</span>
  <span v-if="ruleForm.scene_type == 2">生日前</span>
  <span v-if="ruleForm.scene_type == 3">节日前</span>
<el-input-number
								v-model="ruleFormTempsend_timing_data.number"
								:min="1"
								style="width: 160px;margin-left:8px"
								controls-position="right"
								size="large"
								:controls="true"
							/>

<el-popover 

											popper-style="padding: 0px;min-width:0px"
											placement="right"
											:width="100"
											trigger="click"
										>
											<div style="padding:10px" :style="{background:hoverIndex==1?'#9DD0FF':''}" @mouseover="hoverIndex=1" @click="ruleFormTempsend_timing_data.type='minute'">
                      分钟
                      </div>
                      <div class="active-item-a" style="padding:10px" :style="{background:hoverIndex==2?'#9DD0FF':''}"  @mouseover="hoverIndex=2" @click="ruleFormTempsend_timing_data.type='hour'">
                      小时
                      </div>
                       <div class="active-item-a" style="padding:10px" :style="{background:hoverIndex==3?'#9DD0FF':''}"    @mouseover="hoverIndex=3" @click="ruleFormTempsend_timing_data.type='day'">
                      天
                      </div>
											<template #reference>
											<div class="app-flex-left" style="height:40px;padding:0 16px;border:1px solid #dcdfe6;color:#333;border-left:none">
{{ruleFormTempsend_timing_data.type=='day'?'天':ruleFormTempsend_timing_data.type=='minute'?'分钟':'小时'}}
<el-icon style="margin-left:6px">
        <ArrowDown />
      </el-icon>
</div>
											</template>
										</el-popover>



        <span style="margin-left:8px">
        后
        <span v-if="ruleFormTempsend_timing_data.type=='day'">
          , 当天
            <el-time-picker
            style="width:120px"
            size="large"
								value-format="HH:mm"
								format="HH:mm"
								v-model="ruleFormTempsend_timing_data.time"
								placeholder=""
								
							/>
        </span>
        提醒发送      
        </span>

</div>
</div>





                           <div class="app-flex-left" style="font-weight:600;margin-bottom:10px">
      <div
            style="
              width: 4px;
              height: 15px;
              background-color: #1890ff;
              margin-right: 3px;
              margin-top: 4px;
            "
          ></div>
          推送内容：
</div>
<el-form-item label="消息内容：">
  <div>
    <div>
    </div>
    <div>
													<el-input
														:rows="10"
														@input="handleRefresh"
														class="app-max-width mes-field"
														v-model="send_content.text"
														maxlength="600"
														placeholder="请输入"
														show-word-limit
														type="textarea"
													/>
												</div>
												<!-- 时段欢迎语部分 -->
												<div v-for="(items, indexs) in adjunctData" :key="indexs">
													<!-- 图片部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 1"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【图片】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<!-- <el-icon @click="popDown('1')"><Edit /></el-icon> -->
														</div>
													</div>
													<!-- 链接部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 2"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【链接】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<!-- <el-icon @click="popDown('2')"><Edit /></el-icon> -->
														</div>
													</div>
													<!-- 小程序部分 -->
													<div
														style="display: flex; border: 1px solid #dcdfe6; justify-content: space-between"
														v-if="items.type == 3"
													>
														<div style="display: flex; align-items: center">
															<el-icon style="margin-left: 10px" @click="deleteData(index,indexs)">
																<Remove />
															</el-icon>
															<span style="margin-left: 5px"> 【小程序】: </span>
															<span> {{ items.title }} </span>
														</div>
														<div style="display: flex; align-items: center; margin-right: 5px">
															<!-- <el-icon @click="popDown('3')"><Edit /></el-icon> -->
														</div>
													</div>
													<!-- 添加附件部分 -->
												</div>
												<el-popover
													popper-style="padding: 0px;min-width:0px"
													placement="right"
													:width="100"
													trigger="click"
												>
													<div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('1', '2',index)">
															<MyIcon class="app-icon" name="Pic" />
															<span class="app-gap-words-left-s"> 图片 </span>
														</div>
														<div class="app-hover-cell app-hover-cell-left" @click="showDialog('2', '2',index)">
															<MyIcon class="app-icon" name="LinkChain" />
															<span class="app-gap-words-left-s"> 链接 </span>
														</div>
														<!-- <div class="app-hover-cell app-hover-cell-left" @click="showDialog('3', '2',index)">
															<MyIcon class="app-icon" name="MiniProgram" />
															<span class="app-gap-words-left-s"> 小程序 </span>
														</div> -->
													</div>
													<template #reference>
														<span class="app-5-words app-pointer app-flex-left">
															<el-icon :size="17" class="app-pointer primary-font">
																<CirclePlus />
															</el-icon>
															<span class="app-no-wrap app-pointer primary-font app-gap-words-left-s"> 添加附件 </span>
														</span>
													</template>
												</el-popover>
												<Draggable
													v-model="drag"
													:list="adjunctData"
													:animation="100"
													item-key="id"
													class="list-group"
													:forceFallback="true"
													ghost-class="ghost"
												>
													<template #item="{ element, index }">
														<div class="app-flex-2">
															<div class="app-flex-left">
																<span class="app-close-circle"> - </span>
																<span>
																	【<span v-if="element['type'] == '1'">图片</span>
																	<span v-else-if="element['type'] == '2'">链接</span>
																	<span v-else-if="element['type'] == '3'">小程序</span>】:
																</span>
																<span class="app-gap-words-left-s">{{ element['title'] }}</span>
															</div>
															<MyIcon
																@click="showDialog(element['type'], index)"
																class="app-pointer app-icon"
																name="Edit"
															/>
														</div>
													</template>
												</Draggable>
  </div>

  <EditImg  @getDialogueData="getDialogueData($event, val)" ref="editImg" />
		<EditLink  @getDialogueData="getDialogueData($event, val)" ref="editLink" />
		<EditMiniprogram
			
			@getChooseData="getDialogueData($event, val)"
			ref="editMiniprogram"
		/>


</el-form-item>

        <!-- <el-form-item label="指定旅程" prop="name">
          <div class="title-bgc">
            <el-icon style="margin-right: 7px;color:#FF8F16"><Bell /></el-icon>限制提醒：当客户已经在旅行A阶段2，指定的阶段如果为阶段1，该客户将不会变动，因为阶段只能递进，无法退回
          </div>
          <div style="margin-top: 15px;line-height: 30px;">
            当客户触发SOP，将客户移到到<span>
              <el-select v-model="value" class="m-2" placeholder="请选择客户旅程">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>中<span style="margin-top: 7px;">
              <el-select v-model="value" class="m-2" placeholder="请选择客户阶段">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </span>
          </div>
        </el-form-item> -->
      </el-form>
      <div style="float: right">
        <el-button @click="handleClose">取消</el-button>
        <el-button @click="saverule_data" type="primary">确定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
  import { ref,defineExpose,reactive,onMounted } from "vue";
  import labels from '@/components/app/label.vue'
  import { toRaw } from '@vue/reactivity'
  import {postUserSopAdd,userSopDetail,postUserSopFestival} from '@/api'
  import {userSopOrignalForm,userSopOrule_dataForm,userSopOrule_dataFormsend_timing_data} from '@/data'
  import { useRoute, useRouter } from 'vue-router';
  const Route =useRoute();
  console.log(Route.query.id)

  import { Clock } from '@element-plus/icons-vue'

import EditImg from '@/pages/wework/customeroperations/edit/welcome/editImg.vue'
import EditLink from '@/pages/wework/customeroperations/edit/welcome/editLink.vue'
import EditMiniprogram from '@/pages/wework/customeroperations/edit/welcome/EditApplet.vue'
const jieri=ref([])
const postUserSopFestivalapi=()=>{
  postUserSopFestival().then(res=>{
    jieri.value=res.data
  })
}
onMounted(()=>{
  postUserSopFestivalapi()
})
const selfTime = ref([])
const selfTime1 = ref([])
const selfTime2 = ref([])
const saverule_data = ()=>{
  ruleFormTemp.value.send_starttime = selfTime.value
  ruleFormTemp.value.send_endtime_date = selfTime1.value
  var time = ''
  if (ruleFormTemp.value.send_type==1){
    if (ruleFormTempsend_timing_data.value.type == 'day'){
      time = ruleFormTempsend_timing_data.value.number + '天后' + ruleFormTempsend_timing_data.value.time
    }else if (ruleFormTempsend_timing_data.value.type == 'minute'){
      time = ruleFormTempsend_timing_data.value.number + '分钟后'
    }else if (ruleFormTempsend_timing_data.value.type == 'hour'){
      time = ruleFormTempsend_timing_data.value.number + '小时后'
    }
  }else if (ruleFormTemp.value.send_type==2){
    time = time + ruleFormTemp.value.send_starttime_type==1?'立即开始':ruleFormTemp.value.send_starttime
    time = time +'~'
    console.log(time)
    var end =  ruleFormTemp.value.send_endtime_type==1?'永久有效':(ruleFormTemp.value.send_endtime_date)
    console.log(end,'dfgdfgdfg')
    time = time + end
    console.log(time,'TYUTYU')
    time = time + ' ' 
    var fre = ruleFormTemp.value.send_frequency_type=='day'?'天':ruleFormTemp.value.send_frequency_type=='minute'?'分钟':'小时'
    console.log(fre,'sdfsdf')
    time = time + '每'+ fre + ruleFormTemp.value.send_frequency + '次'

  }
  ruleFormTemp.value.timestamp = time + ' 发送'
  send_content.value.content = adjunctData.value
  ruleFormTemp.value.send_content = send_content.value
  if (ruleFormTemp.value.send_type==1){
    ruleFormTemp.value.send_timing_data = ruleFormTempsend_timing_data.value
  }
  if(editIdx.value==-1){
    var arr = [ruleFormTemp.value,{timestamp:'',isAdd:true}]
    rule_data.value.splice(rule_data.value.length-1,1)
    rule_data.value = [...rule_data.value,...arr]
  }else{
    rule_data.value[editIdx.value] = ruleFormTemp.value
  }
  handleClose()
}
const idsdata=ref([])
const dele = (idx,id)=>{
  rule_data.value.splice(idx,1)
  if(id){
    idsdata.value.push(id)
  }
  
}
const copy = (idx)=>{
  var obj = rule_data.value[idx]
  rule_data.value.splice(rule_data.value.length-1,1) 
  rule_data.value = [...rule_data.value,obj,{timestamp:'',isAdd:true}]
}
import { deepClone } from '@/utils'
const edit = (idx) =>{
  var obj = rule_data.value[idx]
  editIdx.value = idx
  addrule(deepClone(obj))
}
const editImg = ref()
const editMiniprogram = ref()
const editImgindex = ref(1)
const editLink = ref()
const drag = ref(true)
const adjunctData = ref([])
const openingDialogName = ref('')
const editImgshow=ref(1)
// 点击添加附件按钮
const showDialog = (type, val,index) => {
	editImgshow.value=val
	openingDialogName.value = type
	console.log('图片', val)
	if(val == 2){
		editImgindex.value=index
	}
	switch (type) {
		case '1':
			console.log('传入图片', val)
			editImg.value.show(type, val)
			break
		case '2':
			console.log('传入链接', type, val)
			editLink.value.show(type, val)
			break
		case '3':
			editMiniprogram.value.show(type, val)
			break
	}
}
const deleteData = (index,indexs) => {
	// dataTypes.value.splice(index, 1)
	adjunctData.value.splice(indexs,1)
}
const popDown = (type) =>{
  // TODO修改暂时不写
  // 	switch (type) {
	// 	case '1':
	// 		console.log('传入图片', val)
	// 		editImg.value.show(type, val)
	// 		break
	// 	case '2':
	// 		console.log('传入链接', type, val)
	// 		editLink.value.show(type, val)
	// 		break
	// 	case '3':
	// 		editMiniprogram.value.show(type, val)
	// 		break
	// }
}
const router = useRouter()
const save = async ()=>{
  var json = ruleForm.value
  json.del_rule=idsdata.value
  console.log(idsdata.value)
  json.staffid = []
  staffData.value.forEach(item=>{
    json.staffid.push(item.id)
  })
  if (json.filter_status==1){
    json.filter_tag = []
    tagData.value.forEach(item=>{
      json.filter_tag.push(item.tag_id)
    })
  }
  if (json.start_type==2){
    json.start_date = selfTime2.value
  }
  
  if (rule_data.value.length>1){
    json.rule_data = []
    rule_data.value.forEach((item,index)=>{
      if (index!=rule_data.value.length-1){
        json.rule_data.push(item)
      }
    })
  }

  const r = await postUserSopAdd(json)
  if (r){
    router.push({ path: 'personalSop'})
  }
}
const getDialogueData = (val) => {
  console.log(val,editImgshow.value)
	if(editImgshow.value == 2){
		val.link_title = val.title
	}else if(editImgshow.value == 3){
     val.miniprogram_title= val.title
       val.miniprogram_imgurl=  val.imgurl
       val.miniprogram_appid=  val.appId
       val.miniprogram_page=  val.appUrl
  }
  adjunctData.value.push(val)
}

  const ruleForm = ref({})
  const ruleFormTemp = ref({
  })

  const handleClose = ()=>{
    addruleshow.value = false
  }


ruleForm.value = userSopOrignalForm
const changeTab =(index)=>{
  stepid.value = index
  handleRefresh()
}
const TestRef = ref(null)

const showLabels = ()=>{
  // console.log('111')
  // tableselect.value=true
  var data = {
    show:true,
    type:2
  }
  TestRef.value.tableshow(data)
}
const tagData = ref([])
const labeldataapi=(val)=>{
  console.log(val,'sdfdsf')
	var arr = []
	val.list.forEach(item=>{
		arr.push(toRaw(item))
	})
  console.log(arr,'ggggg')
	tagData._value = arr
  isRefresh.value = false
  isRefresh.value = true
}
  const ruleFormRef = ref()
  const value1=ref(true)
  const addruleshow =ref(false)
  const stepdata = [
    {
      id:1,
      name:'使用范围',
    },
    {
      id:2,
      name:'推送设置',
    },
    {
      id:3,
      name:'时间',
    },
  ]

  const ruleFormTempsend_timing_data = ref({
  })
  const hoverIndex = ref(-1)
  const send_content = ref()
  const rule_data = ref([
    {timestamp:'',isAdd:true}
  ])
  const editIdx = ref(-1)
const addrule=(obj)=>{
  if (!obj.type){
    console.log(obj,'asdasd')
    ruleFormTemp.value = obj
    ruleFormTempsend_timing_data.value = obj.send_timing_data || userSopOrule_dataFormsend_timing_data
    send_content.value =  obj.send_content
    adjunctData.value = obj.send_content.content
    selfTime.value = obj.send_starttime
    selfTime1.value = obj.send_endtime_date
  }else{
    editIdx.value = -1
    selfTime.value = ''
    selfTime1.value = ''
    ruleFormTemp.value = deepClone(userSopOrule_dataForm)
    ruleFormTempsend_timing_data.value = deepClone(userSopOrule_dataFormsend_timing_data)
    adjunctData.value = []
    send_content.value = {
      text:'',
      content:''
    }
  }
 
  console.log('asdasdasdassdasd')
  addruleshow.value =true
  handleRefresh()
}
const rules = reactive({
  // name: [
  //   { required: true, message: '', trigger: 'blur' },
  //   { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  // ],
}
)
  const stepid = ref(1)

  const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const dialogVisible = ref(false)
const staffData = ref([])
const chooseStaff = () => {
  dialogVisible.value = true
  chooseDialogue.value.show('staff', staffData.value)
}
const getChooseData = (val) => {
  console.log(val, '数据回显')
  staffData.value = val
  handleRefresh()
}
const chooseDialogue = ref(null)
const handleDele = (index)=>{
  var arr = staffData.value
			arr.splice(index, 1)
			staffData._value = arr
      isRefresh.value = false
      isRefresh.value = true
}
const getData = async() =>{
  if (Route.query.id){
    const r = await userSopDetail({id:Route.query.id})
    ruleForm.value =  r.data
    
    var json = r.data
    staffData.value = json.staffid
    tagData.value = json.filter_tag
    if (json.start_type==2){
      selfTime2.value = json.start_date
    }
    rule_data.value = [...json.rule_data,...[{timestamp:'',isAdd:true}]]
  }
}
getData()

</script>

<style lang="scss" scoped>
.el-card{
  --el-card-padding:0px;
}

</style>

<style>
.el-timeline-item__timestamp.is-top {
    margin-bottom: 18px;
    padding-top: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}
.active-item-a :hover{
background: #9DD0FF;
}
.el-drawer__header{
  margin-bottom:0px;
}
  .stage{
    display: inline-block;
    background-color: #F6FBFF;
    border: 1px solid #9DD0FF;
    padding: 3px 7px;
  }
  .lableser .el-radio.el-radio--large .el-radio__inner{
    margin-top: -40px;
    
  }
  .lableser .el-radio.el-radio--large{
    height: 100px;
  }
  .lableser .el-radio-group{
    display: block;
  }
.bady-sty{
  margin: 15px;
  padding: 15px;
 
}
.index-cla{
  /* font-size: 12px !important; */
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  text-align: center !important;
  line-height: 16px !important;
  border-radius: 8px !important;
  background-color: #ABB5CA !important;
  color:#fff !important;
  margin-left: 20px !important;
}
.label-cla{
  display: inline-block !important;
  /* color:#409EFF; */

  margin-left: 7px !important;
  font-size: 16px !important;
  
}
.label-list{
  width: 100% !important;
  padding: 10px 0px !important;
  border:none  !important;
}
.label-list-bgc{
  background-color: #F6FBFF !important;
  border:none  !important;
  border-right: 2px solid #1584FF !important;
  color:#1584FF !important;
  
}
.index-cla-bgc{
  background-color: #1584FF !important;
}
.top-rigthtitle{
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 15px;
  padding-top: 10px;
  border-bottom: 1px solid #eee;
}
.activation-title{
  display: inline-block;
  font-size: 16px;
}
.activation-bor{
  display: inline-block;
  margin-left: 7px;
  padding: 3px 7px;
  color: #5C5C5C;
  background-color: #F8FDF6;
  border: 1px solid #C8ECB8;
  font-size: 12px;
}
.title-bgc{
  background-color: #FFF6E3;
  border-radius: 5px;
  color:#C69732;
  padding: 10px;
}

.el-page-header {
  display:none;
}

</style>

<style lang="scss">

@import url('../../../style/app-component.scss');
</style>